<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 演示</title>
  <!--<script src="../static/vendors/jquery/jquery.min.js"></script>-->
  <script src="/vendors/jquery/jquery.min.js"></script>

  <style>
    #loading { display: none; color: gray; }
    #result { margin-top: 10px; padding: 10px; border: 1px solid #ddd; }
    .error { color: red; }
  </style>
</head>
<body>

<h2>AJAX 登录演示</h2>
<input type="text" id="username" placeholder="请输入用户名"/>
<input type="password" id="password" placeholder="请输入密码"/>
<button onclick="sendRequest()">登录</button>
<span id="loading">请求中...</span>

<div id="result"></div>

<script>
  function sendRequest() {
    const username = $("#username").val();
    const password = $("#password").val();
    if (!username || !password) {
      alert("请输入内容");
      return;
    }

    // 显示加载状态
    $("#loading").show();
    $("#result").html("").removeClass("error");

    // 异步请求演示
    $.ajax({
      type: "POST",
      url: "/api/users/login",
      contentType: "application/json",
      data: JSON.stringify({
        username: username,
        password: password
      }),
      dataType: "json",
      success: function(data) {
        // 局部刷新演示（仅更新#result区域）
        if (data.success) {
          $("#result").html("<strong>登录成功:</strong> 欢迎 " + data.user.username + "!");
        } else {
          $("#result").html("<strong>登录失败:</strong> " + data.message).addClass("error");
        }
      },
      error: function(xhr) {
        // 错误处理演示
        $("#result").html("请求失败: " + xhr.statusText).addClass("error");
      },
      complete: function() {
        // 隐藏加载状态
        $("#loading").hide();
      }
    });

    // 异步特性演示（这个日志会立即打印，不用等请求完成）
    console.log("登录请求已发送，等待服务器响应...");
  }
</script>

</body>
</html>
